import React, { Fragment }  from 'react';
import style from './index.less'
import ReactMarkdown from 'react-markdown';
import { Tag, Icon } from 'antd';

import FeedTool from './FeedTool';

const RenderReasons = ({ note }) => {
  return (
    <div>
      <Icon type="book" style={{ marginLeft: 24, marginTop: 8, }} />学习重点&nbsp;&nbsp;
      {
        note.reasons && note.reasons.length && note.reasons.map((item, i) => {
            if (i !== note.reasons.length - 1) {
              return (<Tag key={item.reason} color="orange">{item.reason}</Tag>)
            }
          }
        )
      }
    </div>
  )
}
  
const RenderNote = ({ note }) => {
  const title = note.source.title;
  let content = '';
  note.highlight.content && note.highlight.content.length && note.highlight.content.map((item,i) => 
    content = `${content}\n\r${item}`
  )
  return (
    <ReactMarkdown source={content} />
  )
}

export default class TeachV2 extends React.Component{
	handleSearch = ({id}) => {
    this.props.gotoRetailEducationDetail({id})
	}

  render() {
    const {
      notes,
      putEducationFeed,
      gotoRetailEducationDetail,
      trader,
      notesv2,
    } = this.props;

    return (
      <div className={style.teachingList}>
        {
          notesv2&&notesv2.length&&notesv2.map((item,i)=>
          <article key={i} style={{borderBottom:'1px #e9e9e9 solid',padding:'15px 0'}}>
            <header>
              {item.source.isLocal?
                <a
                  href="javascript:;"
                  onClick={this.handleSearch.bind(this, {id: item.id, trader}) }
                  target="_blank">
                  {item.source.title}
                </a>
              :
                <a
                  href={item.source.url}
                  target="_blank">
                  {item.source.title}
                </a>
              }
            </header>
            <RenderNote note={item} />
            <RenderReasons note={item} />
            <FeedTool note={item} putEducationFeed={putEducationFeed} trader={trader} />
          </article>
        )
        }
      </div>
    )
  }
}
